<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>鲁信影城</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link rel="stylesheet" href="res/css/sm.min.css">
    <link rel="stylesheet" href="res/css/sm-extend.min.css">
    <link rel="stylesheet" href="css/index.css">

    <style>
        .swiper-container{
            padding-bottom: 0;
        }
        .swiper-container .swiper-slide a img {
            width: 100%;
        }

    </style>
</head>

<body>
<script type='text/javascript' src='res/jslib/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='js/swiper-3.3.1.jquery.min.js' charset='utf-8'></script>
<script type='text/javascript' src='res/jslib/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='res/jslib/sm-extend.min.js' charset='utf-8'></script>
<script type='text/javascript' src='res/jslib/artTemplate/template.js' charset='utf-8'></script>
<div class="page" id="page">
    <!--头部开始-->
    <header class="bar bar-nav">
        <div class="open-panel" onclick="updateClass(this);">
            <div class="bar_Title">鲁信影城</div>
            <div class="my_icon_left_menu"></div>
        </div>
    </header>
    <!--头部结束-->
    <!--内容区开始-->
    <div class="content" id='index_list'>
        <!--加载主内容开始-->
        <section>
            <div id="banner" class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><a href="#"><img src="images/banner1@2x.png" /></a></div>
                    <div class="swiper-slide"><a href="#"><img src="images/banner2@1x.png" /></a></div>
                    <div class="swiper-slide"><a href="#"><img src="images/banner3@1x.png" /></a></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

            </div>
        </section>

        <style>
            .movielist {
                padding: 0px 4%;
            }

            .movielist > .movieul {
                list-style: none;
                margin: 0;
                padding: 0;
            }

            .movielist > .movieul > .movieli {
                height: 130px;
                position: relative;
                margin: 0;
                padding: 15px 0 0 0;
            }

            .movieli:after{
                position:absolute;
                content: "";
                height:1px;
                background:#c8c8c8;
                width:100%;
                bottom:0;
                -webkit-transform:scaleY(.5);
                -ms-transform:scaleY(.5);
                -o-transform:scaleY(.5);
                transform:scaleY(.5);
            }

            .movielist > .movieul > .movieli > .liimg {
                width: 70px;
                height: 100px;
                margin: 0px;
                padding: 0px;
                position: absolute;
                left: 0px;
                top: 15px;
            }

            .movielist > .movieul > .movieli > .liimg >img {
                height: 100%;
                width: auto;

            }

            .movielist > .movieul > .movieli > .licenter .lititle {
                position: absolute;
                top: 25px;
                left: 90px;
                font-weight: bold;
                font-size: 18px;
                color: #323232;
            }

            .movielist > .movieul > .movieli > .licenter .lititle .title3d {
                display: block;
                height: 18px;
                width: 19px;
                line-height: 20px;
                text-align: center;
                position: absolute;
                top: 3px;
                right: -30px;
                background: #36C1B7;
                font-size: 14px;
                color: #ffffff;

                border-radius: 2px;

            }

            .movielist > .movieul > .movieli > .licenter .licont {
                position: absolute;
                bottom: 18px;
                left: 90px;
                font-size: 14px;
                color: #999999;
            }

            .movielist > .movieul > .movieli > .liright .hotrighttop {
                position: absolute;
                top: 20px;
                right: 0px;
                font-size: 23px;
                color: #E6B489;
            }



            .movielist > .movieul > .movieli > .liright .hotrightbottom a {
                position: absolute;
                right: 0px;
                bottom: 18px;
                font-size: 14px;
                color: #CC3936;
                border: 1px #CC3936 solid;
                border-radius: 4px;
                padding: 3px 15px 0px 15px;
            }

        </style>
        <section>
            <div class="movielist ">
                <ul class="movieul">

                    <li class="movieli">
                        <div class="liimg">
                            <img src="images/poster06@1x.png">
                        </div>
                        <div class="licenter">
                            <span class="lititle">
                                绝地逃亡
                                <span class="title3d">3D</span>
                            </span>
                            <span class="licont">
                                成龙范冰冰携手，猫鼠
                                <br>
                                游戏，异国逃亡
                            </span>
                        </div>
                        <div class="liright">
                            <span class="hotrighttop">8.7</span>
                            <span class="hotrightbottom">
                                <a href="#">购票</a>
                            </span>
                        </div>
                    </li>

                    <li class="movieli">
                        <div class="liimg">
                            <img src="images/poster06@1x.png">
                        </div>
                        <div class="licenter">
                            <span class="lititle">
                                绝地逃亡
                                <span class="title3d">3D</span>
                            </span>
                            <span class="licont">
                                成龙范冰冰携手，猫鼠
                                <br>
                                游戏，异国逃亡
                            </span>
                        </div>
                        <div class="liright">
                            <span class="hotrighttop">8.7</span>
                            <span class="hotrightbottom">
                                <a href="#">购票</a>
                            </span>
                        </div>
                    </li>

                    <li class="movieli">
                        <div class="liimg">
                            <img src="images/poster06@1x.png">
                        </div>
                        <div class="licenter">
                            <span class="lititle">
                                绝地逃亡
                                <span class="title3d">3D</span>
                            </span>
                            <span class="licont">
                                成龙范冰冰携手，猫鼠
                                <br>
                                游戏，异国逃亡
                            </span>
                        </div>
                        <div class="liright">
                            <span class="hotrighttop">8.7</span>
                            <span class="hotrightbottom">
                                <a href="#">购票</a>
                            </span>
                        </div>
                    </li>



                </ul>
            </div>
        </section>
        <!--加载主内容结束-->
    </div>
    <!--内容区结束-->
    <!--底部开始-->
    <div id="bg_masks" style="display: none;top: 40px;left:0px;"></div>
    <!--底部结束-->
</div>


<script type='text/javascript' src='res/js/config.js' charset='utf-8'></script>
<script type='text/javascript' src='js/index.js' charset='utf-8'></script>
<script src="res/js/skin.js"></script>
<script>
    //声明目录
    var mulu = 'res/css/';
    //获取配色体系
    config.loadcss(skin(mulu));
</script>
<script>
    $(document).ready(function () {
        var mySwiper = new Swiper ('#banner', {
            direction: 'horizontal',
            autoplay : 1000,
            loop: true,
            speed:1000,

            // 如果需要分页器
            pagination: '.swiper-pagination',
            paginationClickable: true,


        })

    })

</script>
</body>

</html>